<template>
  <div class="admin">

    <el-container>
      <!--      上半区-->
      <el-header class="layout-header">
        <h1 style="text-align: center">智慧社区小超市配送系统管理平台</h1>
      </el-header>

      <el-container  class="layout-body">


        <!--        左半区-->
        <el-aside class="layout-aside" width="200px">
          <el-menu
              router
              :default-active="$router.currentRoute.toString()"
              class="el-menu-vertical-demo"
              background-color="#394d61"
              text-color="#fff"
              active-text-color="#ffd04b">

            <el-menu-item index="/sys-admin/home">
              <i class="el-icon-house"></i>
              <span slot="title">首页</span>
            </el-menu-item>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-ice-cream-round"></i>
                <span>首页轮播图管理</span>
              </template>

              <el-menu-item index="/sys-admin/banner/list">
                <i class="el-icon-sell"></i>
                轮播图列表
              </el-menu-item>

              <el-menu-item index="/sys-admin/banner/add-new">
                <i class="el-icon-shopping-bag-2"></i>
                添加轮播图
              </el-menu-item>

            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-ice-cream-round"></i>
                <span>商品管理</span>
              </template>

              <el-menu-item index="/sys-admin/product/add-new">
                <i class="el-icon-sell"></i>
                添加商品
              </el-menu-item>

              <el-menu-item index="/sys-admin/product/list">
                <i class="el-icon-shopping-bag-2"></i>
                商品列表
              </el-menu-item>

            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-order"></i>
                <span>订单管理</span>
              </template>

              <el-menu-item index="/sys-admin/orders/list">
                <i class="el-icon-box"></i>
                订单列表
              </el-menu-item>

            </el-submenu>

            <el-menu-item index="/about">
              <i class="el-icon-house"></i>
              <span slot="title">前往首页</span>
            </el-menu-item>

          </el-menu>

        </el-aside>


        <!--        右半区-->
        <el-main class="layout-main">
          <router-view/>
        </el-main>


      </el-container>
    </el-container>

  </div>
</template>

<style>
.layout-header {background: #2c3e50;}
.layout-header h1{color: white;line-height: 60px}
.layout-aside {background: #394d61}
.layout-aside i{color: white}
.layout-body {position: absolute;left: 0px;top: 60px;bottom: 0px;right: 0px}
.layout-main {}

.el-menu-item.is-active{
  background: #2c3e60 !important;
}


</style>

<script>
export default {
  name: "AdminView"
}
</script>

<style scoped>

</style>